@import "handle";
@import "var";
@import './icon.scss';

@font-face {
  font-family: 'icon-iconfont';  /* Project id 2576131 */
  src: url('//at.alicdn.com/t/font_2689114_50db38ptw8v.woff2?t=1626832535436') format('woff2'),
  url('//at.alicdn.com/t/font_2689114_50db38ptw8v.woff?t=1626832535436') format('woff'),
  url('//at.alicdn.com/t/font_2689114_50db38ptw8v.ttf?t=1626832535436') format('truetype');
}


.icon-iconfont {
  font-family: "icon-iconfont" !important;
  font-size: 18px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


%border {
  position: relative;
  &:before {
    content: " ";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid $com-border-color;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    box-sizing: border-box;
    border-radius: 10px;
  }
}


%border-bottom {
  position: relative;
  &:before {
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    border-bottom: 1px solid $com-border-color;
    color: $com-border-color;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index: 2;//看情况使用
  }
}


/*==for IE6/7 Maxthon2==*/
/*==for FF/chrome/opera/IE8==*/
%outer {
  zoom: 1;
  &::after {
    clear: both;
    content: '.';
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;
  }
}
// ⼀⾏⽂字超出显示省略号
%ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
//使⽤：
//@extend %ellipsis;
// ⽂字不被选中
%user-select {
  moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
// 多⾏⽂字超出显示省略号
@mixin ellipsisMultiline($number: 1) {
  display: -webkit-box;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-line-clamp: $number;
  -webkit-box-orient: vertical;
}



//宽高
@mixin wh($w: 100%, $h: 100%) {
  width: $w;
  height: $h;
}

//// 阴影
//@mixin bsd($color: $f3color) {
//  box-shadow: 1Px 1Px 10Px $color;
//}

@mixin sc($size, $colorName, $line-height: 100%, $weight: 400,
 $family: 'PingFang-SC-Regular') {
  font-size: $size;
  color: $colorName;
  line-height: $line-height;
  font-family: $family;
  font-weight: $weight;
}

@mixin set_font($sizeName, $colorName, $line-height: 100%, $weight: 400,
 $family: 'Microsoft YaHei') {
  font-size: $sizeName;
  color: $colorName;
  line-height: $line-height;
  font-family: $family;
  font-weight: $weight;
}


// TODO 字体大小、行高、字体 使用的模板色系 跟着主题设置的状态变换不同色系
@mixin font($sizeName, $colorName, $line-height: 100%, $weight: 400, $family: 'Microsoft YaHei') {
  @include font_size($sizeName);
  @include font_color($colorName);
  line-height: $line-height;
  font-family: $family;
  font-weight: $weight;
}

// TODO cover  使用的模板色系 跟着主题设置的状态变换不同色系
@mixin cover($w: 30px, $h: 30px, $bl: false) {
  width: $w;
  height: $h;
  @include background_color('bgcolor');
  @if $bl {
    border-radius: 50%;
  }
}

// TODO 背景图片地址和大小  使用的模板色系 跟着主题设置的状态变换不同色系
@mixin bis($url) {
  background-image: url($url);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}


//设置图标 字体大小
@mixin icon-font($size, $color, $line-height: 100% , $weight: 500) {
  font-size: $size;
  color: $color;
  line-height: $line-height;
  font-weight: $weight;
}
// 图标大小
@mixin icon-size($size: 10px) {
  width: $size;
  height: $size;
}



//定位全屏
@mixin a-tr {
  position: absolute;
  top: 0;
  right: 0;
}

//定位上下左右居中
@mixin a-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

//定位上下居中
@mixin a-ct {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

//定位上下居中
@mixin a-cl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}


//flex 布局和 子元素 对其方式
@mixin fj($type: space-between) {
  display: flex;
  justify-content: $type;
  -webkit-justify-content: $type;
}



// 透明兼容写法
@mixin opacity($number: 0.5) {
  opacity: $number;
  filter: alpha(opacity=#{$number * 100});
}

// 修改input placeholder颜色
@mixin placeholderColor($color: #fff) {
  &::-webkit-input-placeholder {
    color: $color;
  }

  &::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: $color;
  }

  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: $color;
  }

  &:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: $color;
  }
}


